<!--
	类型选择
	Created by Penglei on 2023/08/16
-->
<template>
	<div class="type-selection">
		<div class="selection-icon btn-previous">
			<el-icon @click="onPrevious()"></el-icon>
		</div>
		<ul class="type-list">
			<li v-for="(item, index) in props.list" :key="index" class="type-list-item" :class="{ active: active == index }"
				@click="onSelected(index)" :title="item.lable || ''">
				<img v-if="active == index" src="@/assets/images/basicData/bg-type-active.png" alt="">
				<img v-else src="@/assets/images/basicData/bg-type.png" alt="">
				<div class="type-list-item-text">{{ item.lable || '' }}</div>
			</li>
		</ul>
		<div class="selection-icon btn-next">
			<el-icon @click="onNext()"></el-icon>
		</div>
	</div>
</template>

<script setup name="TypeSelection">
// 组件事件监听
const emit = defineEmits();
// 父组件传参
const props = defineProps({
	// 列表
	list: {
		type: Array,
		required: false,
		default: () => [
			// { lable: '人口公里网格', value: 'population' },
			// { lable: '经济公里网格', value: 'economy' },
			// { lable: '建筑物公里网格', value: 'building' },
			// { lable: '场地类别', value: 'siteType' },
			// { lable: '道路', value: 'road' },
			// { lable: '危化企业', value: 'enterprise' },
			// { lable: 'PGA等级面', value: 'pag' },
			// { lable: '历史地震', value: 'historical' },
			// { lable: 'DEM', value: 'dem' },
			// { lable: '加油站', value: 'gasStation' },
		]
	}
});

// 当前选择项
let active = ref(0);
// 点击事件
const onSelected = (index) => {
	active.value = index;
	// 类型改变
	changeType()
}
// 上一个按钮点击事件
const onPrevious = () => {
	if (active.value <= 0) {
		active.value = props.list.length - 1;
	} else {
		active.value--;
	}
	// 类型改变
	changeType()
}
// 下一个按钮点击事件
const onNext = () => {
	if (active.value >= props.list.length - 1) {
		active.value = 0;
	} else {
		active.value++;
	}
	// 类型改变
	changeType()
}
// 类型改变
function changeType() {
	emit('changeType', props.list[active.value]);
}
</script>

<style lang="scss" scoped>
.type-selection {
	height: 100%;
	width: 420px;
	background: url('@/assets/images/basicData/bg-left.png') no-repeat center;
	background-size: 100% auto;
	background-position: 40px;

	// 上下一步按钮
	.selection-icon {
		height: 50px;

		.el-icon {
			width: 50px;
			height: 50px;
			left: 92px;
			top: 0px;
			font-size: 36px;
			font-weight: bold;
			color: #FFFFFF;
			cursor: pointer;
		}

		&.btn-previous {
			.el-icon {
				background: url('@/assets/images/basicData/up.png') no-repeat center;
				background-size: 100% 100%;
			}
		}

		&.btn-next {
			.el-icon {
				background: url('@/assets/images/basicData/down.png') no-repeat center;
				background-size: 100% 100%;
			}
		}
	}

	// 列表
	.type-list {
		margin: 0;
		padding: 0;

		&-item {
			width: 250px;
			height: 60px;
			line-height: 60px;
			font-size: 20px;
			font-weight: bold;
			color: #FFFFFF;
			text-align: center;
			cursor: pointer;
			position: relative;

			img {
				height: 85px;
				width: 280px;
				position: absolute;
				top: -12px;
				left: -10px;
				z-index: 0;
			}

			&:nth-child(1) {
				img {
					left: -50px;
				}
			}

			&:nth-child(2) {
				img {
					left: -40px;
					transform: skewX(-2deg);
				}
			}

			&:nth-child(3) {
				img {
					left: -30px;
					transform: skewX(-4deg);
				}
			}

			&:nth-child(4) {
				img {
					left: -25px;
					transform: skewX(-6deg);
				}
			}

			&:nth-child(5) {
				img {
					left: -20px;
					// 调正
					transform: skewX(-8deg);
				}
			}

			&:nth-child(6) {
				img {
					left: -20px;
					// 调正
					transform: rotateX(180deg) skewX(-8deg);
				}
			}

			&:nth-child(7) {
				img {
					left: -25px;
					transform: rotateX(180deg) skewX(-6deg);
				}
			}

			&:nth-child(8) {
				img {
					left: -30px;
					transform: rotateX(180deg) skewX(-4deg);
				}
			}

			&:nth-child(9) {
				img {
					left: -40px;
					transform: rotateX(180deg) skewX(-2deg);
				}
			}

			&:nth-child(10) {
				img {
					left: -50px;
					transform: rotateX(180deg);
				}
			}

			&-text {
				position: relative;
				top: 0;
				z-index: 10;
			}

			&:not(:last-child) {
				margin-bottom: 30px;
			}

			&.active,
			&:hover {
				color: rgb(70, 255, 255);
				font-size: 25px;

				img {
					width: 300px;
				}
			}
		}
	}
}
</style>